<template>
  <div>
    <el-row class="nav">
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      <span class="font-weight rebuild_order">{{$store.state.systemTypeName}}</span>
    </el-row>
    <div class="form-box">
      <div class="form">
        <el-form :model="ruleForm"
                 ref="ruleForm"
                 label-width="100px"
                 class="demo-ruleForm"
                 :rules="rules">
          <el-form-item label="状态名称"
                        prop="name">
            <el-input type="text"
                      maxlength="20"
                      show-word-limit
                      v-model="ruleForm.name"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态顺序">
            <el-input type="status"
                      disabled
                      v-model.number="ruleForm.status"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       class='el-button el-button--primary el-button--medium h30Btn'
                       @click="submitForm('ruleForm')">确认</el-button>
            <el-button class='el-button el-button--primary el-button--medium h30Btn'
                       @click="goBack">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { createWorkOrderStatus, selectById, selectOrder, updateWorkOrderStatus } from '@/api/workStatus.js'
export default {
  data () {
    return {
      ruleForm: {
        name: '',
        status: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入状态名称', trigger: ['blur', 'change'] }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '不能为空' },
          { type: 'number', message: '必须为数字值' }
        ]
      }
    }
  },
  mounted () {
    this.judge()
  },
  methods: {
    // 返回到上一步
    goBack () {
      this.$router.push('/workStatus')
    },
    judge () {
      if (this.$store.state.workStatusId !== '') {
        let id = this.$store.state.workStatusId
        selectById(id).then(res => {
          let data = res.data
          if (data.retCode === 200) {
            this.ruleForm.name = data.data.name
            this.ruleForm.status = data.data.ordering
          }
        })
      } else {
        selectOrder().then(res => {
          if (res.data.retCode === 200) {
            this.ruleForm.status = res.data.data
          }
        })
      }
    },
    createWorkOrderStatus () {
      let params = {
        name: this.ruleForm.name,
        ordering: this.ruleForm.status,
        userId: this.$store.state.userId
      }
      createWorkOrderStatus(params).then(res => {
        let data = res.data
        if (data.retCode === 200) {
          this.$message({
            message: data.msg,
            type: 'success'
          })
          this.$router.push('/workStatus')
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      })
    },
    updateWorkOrderStatus () {
      let params = {
        id: this.$store.state.workStatusId,
        name: this.ruleForm.name,
        ordering: this.ruleForm.status,
        userId: this.$store.state.userId
      }
      updateWorkOrderStatus(params).then(res => {
        let data = res.data
        if (data.retCode === 200) {
          this.$message({
            message: data.msg,
            type: 'success'
          })
          this.$router.push('/workStatus')
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      })
    },
    cancelForm (formName) {
      this.$refs[formName].resetFields()
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$store.state.workStatusId !== '') {
            this.updateWorkOrderStatus()
          } else {
            this.createWorkOrderStatus()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.form-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.form {
  width: 400px;
  height: 200px;
}

/* >>> .el-button--primary,
.el-button--default {
  border-bottom-left-radius: 14px;
  border-top-right-radius: 14px;
} */

.el-icon-arrow-left {
  font-size: 13px;
  color: #b60028;
  font-weight: 700;
  padding: 0 5px;
  cursor: pointer;
}
</style>
